<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			{{books}}
			<ul>
				<li v-for="item in books">
					书本数量是<input type="text" v-model.number="item.count">{{item.count}}
					书本名称是{{item.bookName}}
					书本价格是{{item.count*item.price}}
					<button @click="item.count++">click</button>
				</li>
			</ul>
			书本总数是{{bookTotal}}
			书本总价是{{bookPriceTotal}}

		</div>

		<script src="js/v2.6.10/vue.js"></script>

		<script>
			let myApp = new Vue({
				el: '#app',
				data: {
					name: 'tom',
					msg: '',
					books: [{
							bookName: 'html',
							count: 0,
							price: 8
						},
						{
							bookName: 'css',
							count: 0,
							price: 10
						},
						{
							bookName: 'java',
							count: 0,
							price: 13
						},
						{
							bookName: 'javascript',
							count: 0,
							price: 21
						}

					]
				},
				//计算属性
				computed: {
					//变量来使用
					bookTotal() {
						return this.books.reduce((prev, next) => {
							return prev + next.count
						}, 0)
					},
					bookPriceTotal() {
						return this.books.reduce((prev, next) => {
							return prev + (next.price * next.count)
						}, 0)
					}
				}
			})
		</script>


	</body>
</html>
